<!--
 * @Description: 流程设计器属性面板
 * @Author: DHL
 * @Date: 2022-04-18 14:45:52
 * @LastEditors: DHL
 * @LastEditTime: 2022-10-09 15:54:32
-->

<template>
  <div class="process-panel__container">
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item title="常规" name="base">
        <PanelBase></PanelBase>
      </el-collapse-item>

      <el-collapse-item
        title="消息与信号"
        name="signalAndMassage"
        v-if="bpmnStore.activatedElementType === 'Process'"
      >
        <PanelSignalAndMassage></PanelSignalAndMassage>
      </el-collapse-item>

      <el-collapse-item title="流转条件" name="condition" v-if="conditionFormVisible">
        <PanelFlowCondition></PanelFlowCondition>
      </el-collapse-item>

      <el-collapse-item title="表单" name="form" v-if="formVisible">
        <PanelElementForm></PanelElementForm>
      </el-collapse-item>

      <el-collapse-item
        title="任务"
        name="task"
        v-if="bpmnStore.activatedElementType.indexOf('Task') !== -1"
      >
        <PanelTask></PanelTask>
      </el-collapse-item>

      <!-- <el-collapse-item
        title="多实例"
        name="multiInstance"
        v-if="bpmnStore.activatedElementType.indexOf('Task') !== -1"
      ></el-collapse-item> -->

      <el-collapse-item
        title="任务监听器"
        name="taskListeners"
        v-if="bpmnStore.activatedElementType === 'UserTask'"
      >
        <PanelUserTaskListeners></PanelUserTaskListeners>
      </el-collapse-item>

      <el-collapse-item title="执行监听器" name="listeners">
        <PanelListeners></PanelListeners>
      </el-collapse-item>

      <el-collapse-item title="扩展属性" name="extensions">
        <PanelProperties></PanelProperties>
      </el-collapse-item>

      <el-collapse-item title="附加文档" name="documentation">
        <PanelDocumentation></PanelDocumentation>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts">
  export default { name: 'ProcessPropertiesPanel' }
</script>

<script setup lang="ts">
  import { onBeforeUnmount, ref } from 'vue'
  import { useBpmnStore } from '../store/bpmn'
  import { log } from '/@/utils/log'
  import PanelBase from './base/base.vue'
  import PanelSignalAndMassage from './signalAndMassage/signalAndMassage.vue'
  import PanelListeners from './listeners/listeners.vue'
  import PanelUserTaskListeners from './listeners/userTaskListeners.vue'
  import PanelProperties from './properties/properties.vue'
  import PanelDocumentation from './documentation/documentation.vue'
  import PanelTask from './task/task.vue'
  import PanelElementForm from './form/elementForm.vue'
  import PanelFlowCondition from './condition/flowCondition.vue'

  //////////////////////////////////////////////////
  // 属性
  //////////////////////////////////////////////////
  const bpmnStore = useBpmnStore()

  const activeNames = ref(['base'])

  // 流转条件设置
  const conditionFormVisible = ref(false)
  // 表单配置
  const formVisible = ref(false)

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////
  /**
   * 初始化
   */
  function initModels() {
    getActiveElement()
  }

  /**
   * 获取元素
   */
  function getActiveElement() {
    // 初始第一个选中元素 bpmn:Process
    initFormOnChanged(null)

    bpmnStore.bpmnModeler.on('import.done', () => {
      initFormOnChanged(null)
    })

    // 监听选择事件，修改当前激活的元素以及表单
    bpmnStore.bpmnModeler.on('selection.changed', ({ newSelection }: any) => {
      initFormOnChanged(newSelection[0] || null)
    })

    bpmnStore.bpmnModeler.on('element.changed', ({ element }: any) => {
      // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
      if (element && element.id === bpmnStore.activatedElement.elementId) {
        initFormOnChanged(element)
      }
    })
  }

  /**
   * 初始化数据
   */
  function initFormOnChanged(element: any) {
    let activatedElement = element
    if (!activatedElement) {
      activatedElement =
        bpmnStore.getByElementRegistry('bpmn:Process') ??
        bpmnStore.getByElementRegistry('bpmn:Collaboration')
    }
    if (!activatedElement) return

    log.info(
      'select element changed',
      `id: ${activatedElement.id} , type: ${activatedElement.businessObject.$type}`
    )

    const activatedElementType = activatedElement.type.split(':')[1] || ''

    conditionFormVisible.value = !!(
      activatedElementType === 'SequenceFlow' &&
      activatedElement.source &&
      activatedElement.source.type.indexOf('StartEvent') === -1
    )
    formVisible.value = activatedElementType === 'UserTask' || activatedElementType === 'StartEvent'

    nextTick(() => {
      bpmnStore.setActivatedElement(activatedElement)
    })
  }

  defineExpose({ initModels })

  //////////////////////////////////////////////////
  // 生命周期
  //////////////////////////////////////////////////
  onBeforeUnmount(() => {})
</script>
